<template>
	<view class="page has-fixed-footer">
		<page-header :showPlaceHolder="false" :showTitle="false"></page-header>
		<!-- 内容 -->
		<view class="content">
			<view class="title">
				实名认证
			</view>
			<view class="face">
				<image src="../../../static/images/authentication/face.png" mode=""></image>
			</view>
			<view class="tips">
				人脸验证仅能由*三本人完成
			</view>
			<view class="prompt">
				<view class="item">
					<image src="../../../static/images/authentication/Occlusion.png" mode=""></image>
					<view class="item-text">
						避免遮挡
					</view>
				</view>
				<view class="item">
					<image src="../../../static/images/authentication/Occlusion.png" mode=""></image>
					<view class="item-text">
						光线充足
					</view>
				</view>
				<view class="item">
					<image src="../../../static/images/authentication/phone.png" mode=""></image>
					<view class="item-text">
						正对手机
					</view>
				</view>
			</view>

			<fui-backdrop :show="isShow" closable @click="close">
				<Register :childProp="parentText" @end="end" @nextStep="nextStep"></Register>
			</fui-backdrop>
		</view>
		<view class="ui-fixed-footer ui-fixed-footer__white">
			<fui-button :disabled="false" height="78rpx" :margin="['556rpx','0','0','0 ']" disabledBackground="#DFDFDF"
				disabledColor="#666666" background="var(--fui-color-primary)" bold @click="submit">开始识别</fui-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import pageHeader from '@/components/header'
	import Register from '@/components/popup/register'
	import {
		gotoAppPermissionSetting
	} from '@/common/permission.js'
	import SystemApi from '@/api/system'
	// const bdFaceLive = ref(uni.requireNativePlugin('liyahong-BDFace-v4'))
	var resultBackEnable = ref(false)
	const result = ref('')
	const faceResult = ref('')
	const parentText = ref()
	let isShow = ref(false)
	const img = ref('')
	const checked = ref()
	const submit = (() => {
		scan()
	})
	onLoad((query) => {
		img.value = query.img
		checked.value = query.checked
	})
	const close = (() => {
		isShow.value = false
	})
	const back = (() => {
		uni.navigateBack({
			delta: 1
		})
	})

	const end = ((e) => {
		if(parentText.value == 'success'){
			uni.navigateTo({
				url: `./Head`
			})
		}else{
			isShow.value = false
		}
		
	})
	const nextStep = (() => {
		if(parentText.value == 'success'){
			uni.navigateTo({
				url: `./Head`
			})
		}else{
			isShow.value = false
		}
	})
	const scan = (() => {
		const licenseID = plus.os.name == 'Android' ? 'scm-ui-vms-face-android' : 'lyhBDFace-face-ios'
		// 调用插件开始采集人脸
		bdFaceLive.value.liveFace({
				licenseID: licenseID, // 必填项，与百度资料上的License ID保持一致
				/**
				 * Eye： 眨眨眼
				 * Mouth： 张张嘴
				 * HeadLeft： 向左缓慢转头
				 * HeadRight：向右缓慢转头
				 * HeadUp：缓慢抬头
				 * HeadDown：缓慢低头
				 * 
				 * 默认无动作，如果填写了会按照指定动作执行
				 * 注意：这里跟老版的不一样，更符合用户需求
				 */
				liveArray: ['Mouth', 'HeadLeft', 'HeadRight'], // 选填【活体动作】
				liveRandom: true, // 选填【动作是否随机】，默认有序，false：有序|true：随机
				sound: 0, // 选填【是否有声】，默认有声，0：有声|1：无声
				camera: 0, // 选填【前置|后置摄像头】，默认前置，0：前置|1：后置
				openMask: true, // 选填【是否开启戴口罩采集】，默认false不开启
				hintTextColor: '#333333', // 选填【提示文字颜色】，默认#333333
				backgroundColor: '#FFFFFF', // 选填【页面背景颜色】，默认#FFFFFF
				roundColor: '#CCCCCC', // 选填【人脸采集框颜色】，默认#666666
				roundSelectColor: '#FF0000', // 选填【识别成功时采集框的颜色】，默认#FF0000
				copyright: '', // 选填【底部版权文字内容】，默认''
				copyrightColor: '#0094FF', // 选填【底部版权文字颜色】，默认#CCCCCC
				showBottomImage: false, // 选填【是否显示底部背景图片】，默认false
				otherImage: true, // 选填【是否返回动作人像信息】，默认false，true：返回base64ImageResult + otherBase64Image，false：只返回base64ImageResult
				originalImage: true, // 选填【是否返回原图照片信息】，默认false，true：返回base64ImageResult + originalBase64Image，false：只返回base64ImageResult
				/**
				 * 0：正常、1：宽松、2：严格
				 * 可以通过quality_config.json配置相关质量属性，具体属性介绍参考文档
				 */
				qualityLevel: 0, // 选填【质量等级】，默认0
				detectTimeOut: 15, // 选填【采集超时时间】，默认15，单位(秒)
				/**
				 * 如果设置为true，页面右上方会多一个相机切换功能入口
				 * 您如果想自定义图片，可以参考文档中的自定义图片说明
				 */
				switchCameraEnable: false, // 选填【是否开启相机切换功能】，默认false
				/**
				 * 如果你希望采集完成之后，需要前端处理完成之后再返回的话，可以将此属性设置为false
				 * 需注意：设置为false之后插件将不会调用关闭页面方法，需要前端手动调用插件的closeLive()方法完成关闭识别页面操作
				 */
				resultBackEnable: resultBackEnable.value, // 选填【采集完成之后是否返回】，默认true
				tipsModel: {}, // 选填【自定义提示文字内容】，取值可参考文档，不填则使用插件默认提示
				/**
				 * width 和 height属性是用来设置人脸采集预览画面的宽高的
				 * 
				 * 1、如果您仅用于手机端采集的话，插件内部已经对所有手机端进行了适配，此属性无需理会，直接设置0即可
				 * 2、如果您将插件用于平板设备、厂商定制机设备、快递员扫码设备可能会出现预览框人脸被拉伸的情况，
				 * 	  此时您可以来设置width 和 height属性来进行特定的适配，一般设置为width:1080，height:1920即可，
				 * 	  具体根据设备分辨率来设置
				 */
				width: 0, // 选填【自定义预览画面宽度】，默认值0
				height: 0, // 选填【自定义预览画面高度】，默认值0
				soundEnable: true, // 选填【是否显示声音图片】默认值：true
				cameraWidthRatio: 0.33, // 选填【识别框宽度比例，一般用于非手机设备，如果出现人脸框过大可以设置此属性，值越大框越小】，默认值0.33
				cameraHeightRatio: 0.1, // 选填【识别框高度比例，一般用于非手机设备，如果出现人脸框过大可以设置此属性，值越大越朝上】，默认值0.1
				translateCanvas: false, // 选填【是否交换识别框宽高，一般用于非手机设备，如果出现人脸框过大可以设置为true】，默认值false
				disableGooglePermission: false // 选填【是否禁止goole不允许的权限，需要上架google商店时设置为true】默认值：false
			},
			result => {
				/**
				 * code=1时会返回base64ImageResult
				 * 	 + 如果otherImage=true，otherBase64Image也会返回
				 * 	 + 如果originalImage=true，originalBase64Image也会返回
				 * 如果使用百度人脸比对的话建议使用base64ImageResult，这个返回的是最佳人像照片，
				 * 做百度人脸比对是完全没有问题的，也是百度官方推荐的
				 * 
				 * otherBase64Image：经过百度抠图过的人脸照片
				 * originalBase64Image：人脸采集过程中的原图照片
				 */
				switch (result.code) {
					case 1: // 人脸采集成功
						// 调用插件方法进行图片压缩，压缩后的图片在150KB以下
						bdFaceLive.value.compressBase64Image({
								base64: result.base64ImageResult, // 必填【base64数据】，直接使用插件返回的base64数据即可，不要带前缀
								compressSize: 150 // 选填【期望压缩大小】，默认值150，单位KB
							},
							compressResult => {
								if (compressResult.code === 1) { // 压缩成功
									// // 获取压缩结果
									const compressData = compressResult.result
									faceResult.value = `data:image/jpg;base64,${compressData.base64}`
									checkResultBackEnable(faceResult.value)
									// 调用插件方法将base64转为图片路径
									// bdFaceLive.value.base64ToFile({
									// 	base64: compressData.base64 // 必填【base64数据】，直接使用插件返回的base64数据即可，不要带前缀
									// }, fileResult => {
									// 	// 获取到图片路径，可以直接调用uni.uploadFile上传到自己的服务器
									// 	// 【注意：IOS端使用本地路径无法显示图片，但是上传到服务器是没有问题的，如果需要展示图片，可以直接展示base64】
									// 	faceResult.value = fileResult.result
									// 	result.value = '人脸采集成功啦'
									// 	console.log(fileResult);
									// 	// checkResultBackEnable()
									// })
								}
							})
						return
					case 2: // 跳转人脸采集页面前的回调，仅Android端支持
						break
					case -1: // 其他错误，如：licenseID没有配置等
						break
					case -2: // 活体检测超时
						break
					case -3: // 没有提取到人脸信息
						break
					case -4: // 用户主动关闭
						break
					case -5: // 权限申请被拒绝，仅Android端支持
						if (result.never) { // 是否被永远拒绝，如果被永远拒绝需要跳转设置页让用户手动开启
							uni.showModal({
								title: '权限受限',
								msg: '您拒绝了一些权限，可能导致该服务无法正常使用，请前往设置！',
								confirmText: '前往设置',
							}).success(() => {
								gotoAppPermissionSetting()
							})
						} else { // 没有永远拒绝就弹窗给予提示然后再次调用插件
							uni.showModal({
								title: '权限受限',
								msg: '您拒绝了一些权限，可能导致该服务无法正常使用，请授予！'
							}).success(() => {
								scan()
							})
						}
						break
					case 100001: // 开始初始化SDK，此处如果用户网络不佳会比较耗时，为了更好的用户体验，建议设置弹窗
						uni.showLoading({
							title: '正在进入认证,请稍后....',
							mask: true
						})
						break
					case 100002: // SDK初始化完成，如果在100001开启了弹窗，可以在这里关闭
						uni.hideLoading()
						break
				}
				result.value = JSON.stringify(result)
			}
		)

	})
	const logResult = ((result) => {
		// 最佳人像信息
		console.log('base64', result.base64ImageResult)
		// 百度抠图的人像信息
		const otherBase64 = result.otherBase64Image
		if (otherBase64) {
			for (const key in otherBase64) {
				console.log(key, otherBase64[key])
			}
		}
		// 原图人像信息
		const originalBase64 = result.originalBase64Image
		if (originalBase64) {
			for (const key in originalBase64) {
				console.log(key, originalBase64[key])
			}
		}
	})
	const checkResultBackEnable = ((resdata) => {
		// 如果resultBackEnable设置为false后，采集完成之后不会主动关闭识别页面
		if (resultBackEnable.value === false) {
			bdFaceLive.value.closeLive((result) => {
				console.log(result);
				if (result.code == 1) {
					SystemApi.faceVerify({
						image: resdata,
						idCardUrl: img.value
					}).then((res) => {
						if(res.data >= 70){
							parentText.value = 'success'
							isShow.value = true
							uni.hideLoading()
						}else{
							parentText.value = 'fail'
							isShow.value = true
						}
					}).catch((res)=>{
						parentText.value = 'fail'
						isShow.value = true
					})
				}
			})
		}
	})
</script>

<style lang="scss" scoped>
	page{
		overflow: hidden;
	}
	.page {
		position: relative;
		min-height: 100%;
		::v-deep.fui-nav__title {
			justify-content: left !important;
			margin-left: 36rpx;
		}

		::v-deep.fui-nav__left {
			width: 17rpx !important;
		}

		.content {
			margin: 36rpx;

			.title {
				margin-bottom: 148rpx;
				font-size: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.face {
				display: flex;
				justify-content: center;

				image {
					display: block;
					width: 368rpx;
					height: 366rpx;
				}
			}

			.tips {
				font-size: 32rpx;
				font-weight: 400;
				color: #999999;
				margin-top: 40rpx;
				text-align: center;
			}

			.prompt {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 92rpx;

				.item {
					margin-right: 84rpx;

					image {
						width: 88rpx;
						height: 88rpx;
						display: block;
						margin: 0 auto;
					}

					.item-text {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						margin-top: 10rpx;
						text-align: center;
					}
				}

				.item:last-child {
					margin-right: 0;
				}
			}
		}
	}
</style>